import React, { useState } from 'react';
import { Tabs, Empty } from 'antd';
import { eventTrack } from '@/utils/track';
import authHelpr from '@/utils/auth/helper';
import { MoreBar } from '../common/TabBarExtraContent';
import { RecruitmentTask, RecruitmentNeeds, Candidate, Interview, Offer } from './TabPaneItem';
import homepageStyles from '../../homepage.less';

const { TabPane } = Tabs;
const { checkCode } = authHelpr;

const tabs = [
    {
        name: '招聘任务',
        code: 'portal:myjob:recruit',
        component: RecruitmentTask,
        path: '/personal/portal/recruit/task',
        query: {}
    },
    {
        name: '招聘需求',
        code: 'portal:myjob:want',
        component: RecruitmentNeeds,
        path: '/personal/portal/recruit/demand',
        query: {}
    },
    {
        name: '候选人',
        code: 'portal:myjob:candidate',
        component: Candidate,
        path: '/personal/portal/recruit/candidate',
        query: {}
    },
    {
        name: '面试',
        code: 'portal:myjob:interview',
        component: Interview,
        path: '/personal/portal/recruit/interview',
        query: { page: '2' }
    },
    {
        name: 'offer',
        code: 'portal:myjob:offer',
        component: Offer,
        path: '/personal/portal/recruit/offer',
        query: {}
    }
];

/**
 * 招聘管理
 */
const Zpgl = props => {
    const { responders } = props;
    const { onDelete, onAdd } = responders;
    const hasAuth = tabs.filter(item => checkCode(item.code));
    const [linkProps, setLinkProps] = useState({
        to: hasAuth.length > 0 ? hasAuth[0].path : '',
        query: hasAuth.query || {}
    });
    const isAllNone = hasAuth.length === 0;

    const onChange = code => {
        let eventName = null;
        let label = null;
        // 埋点
        switch (code) {
            case 'portal:myjob:recruit':
                eventName = 'personal_portal_recruit_task_click';
                label = '个人主页-我的招聘-招聘任务';
                break;
            case 'portal:myjob:want':
                eventName = 'personal_portal_recruit_demand_click';
                label = '个人主页-我的招聘-招聘需求';
                break;
            case 'portal:myjob:candidate':
                eventName = 'personal_portal_recruit_candidate_click';
                label = '个人主页-我的招聘-候选人';
                break;
            case 'portal:myjob:interview':
                eventName = 'personal_portal_recruit_interview_click';
                label = '个人主页-我的招聘-面试';
                break;
            case 'portal:myjob:offer':
                eventName = 'personal_portal_recruit_offer_click';
                label = '个人主页-我的招聘-offer';
                break;
            default:
                break;
        }
        eventTrack({
            eventName,
            eventProps: {
                label
            }
        });
        setLinkProps({
            to: tabs.find(item => item.code === code).path,
            query: tabs.find(item => item.code === code).query || {}
        });
    };
    return (
        <>
            {isAllNone ? (
                <div>
                    <div className={homepageStyles.wnNoticeTitle}>
                        <h4>我的招聘</h4>
                    </div>
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                </div>
            ) : (
                <Tabs
                    defaultActiveKey="1"
                    onChange={onChange}
                    className={homepageStyles.wnWdlcTitle}
                    tabBarExtraContent={<MoreBar linkProps={linkProps} onDelete={onDelete} onAdd={onAdd} />}
                >
                    {hasAuth.map(item => (
                        <TabPane tab={item.name} key={item.code}>
                            <item.component />
                        </TabPane>
                    ))}
                </Tabs>
            )}
        </>
    );
};
export default Zpgl;
